<!DOCTYPE html>
<html>
	<head>
		<title>Vue实例化的生命周期</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<p>{{ message }}</p>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: "wuhao is boy"
				},
				beforeCreate: function() {//组件实例刚被创建，组件属性计算之前，如data属性等（可以在这加个loading事件 ）
					console.group('beforeCreate 创建前状态===============》');
					console.log("el     : " + this.$el); //undefined
					console.log("data   : " + this.$data); //undefined 
					console.log("message: " + this.message)
				},
				created: function() {//组件实例创建完成，属性已绑定，但DOM未生成，$el属性不存在（在这结束loading，还做一些初始化，实现函数自执行 ）
					console.group('created 创建完毕状态===============》');
					console.log("el     : " + this.$el); //undefined
					console.log("data   : " + this.$data); //已被初始化 
					console.log("message: " + this.message); //已被初始化
				},
				beforeMount: function() {//模板编译/挂载之前调用
					console.group('beforeMount 挂载前状态===============》');
					console.log("el     : " + (this.$el)); //已被初始化
					console.log(this.$el);
					console.log("data   : " + this.$data); //已被初始化  
					console.log("message: " + this.message); //已被初始化  
				},
				mounted: function() {//模板编译/挂载之后调用（ 在这发起后端请求，拿回数据，配合路由钩子做一些事情）
					console.group('mounted 挂载结束状态===============》');
					console.log( "el     : " + this.$el); //已被初始化
					console.log(this.$el);
					console.log( "data   : " + this.$data); //已被初始化
					console.log( "message: " + this.message); //已被初始化 
				},
				beforeUpdate: function() {//组件更新之前调用
					console.group('beforeUpdate 更新前状态===============》');
					console.log("el     : " + this.$el);
					console.log(this.$el);
					console.log( "data   : " + this.$data);
					console.log( "message: " + this.message);
				},
				updated: function() {//组件更新之后调用
					console.group('updated 更新完成状态===============》');
					console.log( "el     : " + this.$el);
					console.log(this.$el);
					console.log( "data   : " + this.$data);
					console.log("message: " + this.message);
				},
				beforeDestroy: function() {//组件销毁前调用（你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容）
					console.group('beforeDestroy 销毁前状态===============》');
					console.log( "el     : " + this.$el);
					console.log(this.$el);
					console.log( "data   : " + this.$data);
					console.log("message: " + this.message);
				},
				destroyed: function() {//组件销毁后调用
					console.group('destroyed 销毁完成状态===============》');
					console.log( "el     : " + this.$el);
					console.log(this.$el);
					console.log( "data   : " + this.$data);
					console.log( "message: " + this.message)
				}
			})
		</script>
	</body>
</html>
